<template>
  <div class="view-sticky section-r" id="sticky">
    <div class="color_box"></div>
    <!--吸顶内容 -->
    <div class="pride_tab_fixed" ref="pride_tab_fixed">
      <div class="pride_tab" :class="titleFixed == true ? 'isFixed' : ''">
        <p class="title">解决的问题</p>
        <p>
          <label class="text">1、可以解决抖动的Bug:</label> 在吸顶元素 position
          变为 fixed
          的时候，该元素就脱离了文档流，下一个元素就进行了补位。就是这个补位操作造成了抖动)
        </p>
        <p>
          <label class="text">2、吸顶效果不能及时响应：</label> 使用
          position:sticky，Android 使用滚动监听 getBoundingClientRect().top 的值
        </p>
      </div>
    </div>
    <div class="color_box_two"></div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
@Component
export default class ViewSticky extends Tools {
  public $refs!: {
    pride_tab_fixed: any;
    sticky: any;
  };
  private titleFixed: boolean = false;
  //滚动监听，头部固定
  private handleScroll() {
    let offsetTop = this.$refs.pride_tab_fixed.getBoundingClientRect().top;
    console.log("该元素相对浏览器视窗上下左右的距离", offsetTop);
    this.titleFixed = offsetTop < 0;
  }
  mounted() {
    this.titleFixed = false;
    let dom: any = document.getElementById("sticky");
    dom.addEventListener("scroll", this.handleScroll, { passive: false });
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'

.section-r {
  border: 1px solid $border-base-color
  border-radius: 4px
  width: 300px
  flex-shrink: 0
  max-height: 600px
  overflow: auto
}
.view-sticky {
  .color_box {
    width: 100%
    height: 20px
    background: #333
  }
  .color_box_two {
    width: 100%
    height: 700px
    background: -webkit-linear-gradient(top, #333333 20%, #999999 40%, #333333 80%)
  }
  .pride_tab_fixed {
    height: 130px
    background: #999
  }
  .pride_tab {
    width: 100%
    text-align: center
    background: #999
  }
  .isFixed {
    position: fixed
    top: 0
    left: 0
    z-index: 99
  }
  .title {
    font-size: 12px
    font-weight: 700
    color: #f19000
  }
  .text {
    font-size: 12px
    font-weight: 700
    color: red
  }
}
</style>
